<template>
  <el-dialog
    class="SelfDialog" :class="calcSize.className"
    :visible="isShow" :show-close="false"
    :close-on-click-modal="false"
    :width="calcSize.w + 'px'" v-bind="$attrs"
    @update:visible="$emit('dialogCancel', $event)">
    <header slot="title" class="haeader-line">
      {{titTxt}}
      <i class="close-btn el-icon-circle-close" @click="$emit('dialogCancel', false)"></i>
    </header>

    <!--body部分-->
    <slot></slot>
    <slot name="bodyAttach">
      <div class="textCenter mt30 mb30">
        <template v-if="!noBtnConfirm">
          <button type="button" class="btn-operate btn-style-main mr30" @click="$emit('dialogConfirm')">提交</button>
          <button v-if="needResetBTN" type="button" class="btn-operate btn-style-main mr30" @click="$emit('dialogReset')">重置</button>
          <button type="button" class="btn-operate-colorless btn-style-fb" @click="$emit('dialogCancel', false)">取消</button>
        </template>
        <button v-else type="button" class="btn-operate-colorless btn-style-fb" @click="$emit('dialogCancel', false)">关闭</button>
      </div>
    </slot>
    <slot name="bodyOtherAttach"></slot>
    <!--body部分-->

    <div slot="footer">
      <slot name="footer">
      </slot>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      isShow: {
        type: Boolean,
        required: true
      },
      // dialog三种规格size，默认最小s
      size: {
        type: String,
        default: 's',
        validator: val => ['s', 'm', 'l', 'xl', 'xxl'].includes(val)
      },
      titTxt: {
        type: String,
        required: true
      },
      // 是否没有提交按钮，一般在表单状态为查看时启用
      noBtnConfirm: {
        type: Boolean,
        default: false
      },
      needResetBTN: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      isShow (newVal) {
        // 返回顶部，滚动条
        const dialogBody = document.querySelector('.el-dialog__body')
        if (dialogBody) dialogBody.scrollTop = 0
      }
    },
    computed: {
      calcSize () {
        if (this.size === 's') {
          return {className: 'size-s', w: 450}
        } else if (this.size === 'm') {
          return {className: 'size-m', w: 510}
        } else if (this.size === 'l') {
          return {className: 'size-l', w: 760}
        } else if (this.size === 'xl') {
          return {className: 'size-xl', w: 1060}
        } else if (this.size === 'xxl') {
          return {className: 'size-xxl', w: 1200}
        }
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  @import '~@/assets/css/public.scss';

  .SelfDialog {
    /deep/ .el-dialog {
      box-sizing: content-box;
      border: 1px solid #eee;
      border-radius: 0 0 10px 10px;
      overflow: hidden;
      margin-top: 10vh !important;
    }
    /deep/ .el-dialog__header {
      padding: 0;
    }
    /deep/ .el-dialog__footer {
      padding: 0;
    }
    /deep/ .el-dialog__body {
      overflow-y: auto;
      padding: 30px 10px 0;
      position: relative;
      max-height: 77vh;
      overflow-y: scroll;

    }
  }

  .haeader-line {
    position: relative;
    height: 50px;
    background-color: #{$c-main};
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    .close-btn {
      cursor: pointer;
      position: absolute;
      top: 50%;
      right: 9px;
      transform: translateY(-50%);
    }
  }
</style>
